<template>
	<view class="u-page">
		<u--form labelPosition="top" labelWidth="100%" :labelStyle="labelStyle" :model="form" :rules="rules" ref="form">
			<view v-if="oneself">
				<view class="u-flex mt-2">
					<text class="">集资参与人银行卡正面</text>
				</view>
				<text class="tip">请上传您本人名下银行卡，并确保账户状态正常。</text>

				<view>
					<view class="u-flex mt-2">
						<u-upload accept="image" capture="camera" width="360" height="240"
							name="bankCardPositiveUrl" maxCount="1" :fileList="bankCardPositiveUrl"
							@afterRead="uploadFile($event, atterUploadCardPositive)"
							@delete="deleteFile($event, atterDeleteFile)">
							<image src="../../static/card-bank.jpg" mode="widthFix" class="card-img"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view v-if="!oneself">
				<view class="u-flex mt-2">
					<text class="">继承权利人银行卡正面</text>
				</view>
				<text class="tip">请上传您本人名下银行卡，并确保账户状态正常。</text>
				<view>
					<view class="u-flex mt-2">
						<u-upload accept="image" capture="['album', 'camera']" width="360" height="240"
							name="bankCard1PositiveUrl" maxCount="1" :fileList="bankCard1PositiveUrl"
							@afterRead="uploadFile($event, atterUploadCard1Positive)"
							@delete="deleteFile($event, atterDeleteFile)">
							<image src="../../static/card-bank.jpg" mode="widthFix" class="card-img"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<u-form-item label="集资参与人银行卡号" prop="bankCardNo" v-if="oneself">
				<u--input v-model="form.bankCardNo" required placeholder="请输入集资参与人银行卡号" clearable></u--input>
			</u-form-item>
			<u-form-item label="继承权利人银行卡号" prop="bankCard1No" v-if="!oneself">
				<u--input v-model="form.bankCard1No" required placeholder="请输入继承权利人银行卡号" clearable></u--input>
			</u-form-item>
			<u-form-item label="持卡人姓名" prop="nameOnCard">
				<u--input v-model="form.nameOnCard" required placeholder="请输入持卡人姓名" clearable></u--input>
			</u-form-item>
			<u-form-item label="开户行所属省份" prop="brankArea">
				<pickerProvince @change="addressChange" class="tip">{{form.brankArea == '' ? '点此选择开户行所属省份' : form.brankArea}}</pickerProvince>
			</u-form-item>
			<!-- <u-form-item label="开户行名称" prop="bankName">
				<u--input v-model="form.bankName" required placeholder="请输入开户行名称" clearable></u--input>
			</u-form-item> -->
			<view>
					  <view class="u-flex mt-2">
					    <text class="">开户行名称</text>
					  </view>
					  <text class="tip">请填写开户行名称或点击右侧选择开户行按钮选择。</text>
					  <view>
					  		  <view class="u-flex mt-2">
					  			  <u--input v-model="form.bankName" required placeholder="请输入开户行名称" clearable>
					  			  	<template slot="suffix">
					  			  		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow = false" @confirm="pickerConfirm" :itemHeight="80"></u-picker>
					  			  		<u-button @click="pickerShow = true">选择开户行</u-button>
					  			  	</template>
					  			  </u--input>
					  		  </view>
					  </view>
			</view>
			<u-form-item label="手机号码" prop="contactNumber">
				<u--input v-model="form.contactNumber" disabled placeholder="请输入手机号码" ></u--input>
			</u-form-item>
			<u-form-item label="邮寄地址" prop="mailingAddress">
				<u--input v-model="form.mailingAddress" required placeholder="请输入邮寄地址" clearable></u--input>
			</u-form-item>
			
			<u-form-item label="银行佐证" prop="bankEvidence">
			  <u-upload
			    accept="image"
			    capture="['album', 'camera']"
			    width="360"
			    height="240"
			    name="bankEvidence"
			    maxCount="1"
			    :fileList="bankEvidence"
			    @afterRead="uploadFile($event, atterUploadFile)"
			    @delete="deleteFile($event, atterDeleteFile)"
			  >
			    <image src="../../static/bank-evidence.png" mode="widthFix" class="card-img"></image>
			  </u-upload>
			</u-form-item>

			<u-form-item class="mt-4">
				<u-row class="w-100" justify="center">
					<u-col span="5" justify="center">
						<u-button shape="circle" @click="toPreMcPage">
							<view>上一步</view>
						</u-button>
					</u-col>
					<u-col span="1"></u-col>
					<u-col span="5" justify="center">
						<u-button type="primary" shape="circle" @click="confirm">
							<view>下一步</view>
						</u-button>
					</u-col>
				</u-row>
			</u-form-item>
		</u--form>
		<u-row class="mt-4">
			<u-col span="12">
				<uni-steps :options="stepList" :active="currentStepIndex"></uni-steps>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import pickerProvince from '@/component/pickerProvince/pickerProvince.vue'
	import bankNameData from '@/common/bankNameData.js'
	
	import {
		checkPhone
	} from '@/util/validate.js';
	import {
		baseFont,
		mcStepKey
	} from '@/common/config.js';
	import {
		getAccessToken,
		bankCardOCR
	} from '@/common/baiduApi.js';
	import {
		pathToBase64
	} from 'image-tools';

	export default {
		components: {
			pickerProvince
		},
		data() {
			return {
				// preStep: 'step1',
				currentStep: mcStepKey.step2,
				nextStep: mcStepKey.step3,
				labelStyle: {
					fontSize: baseFont + 'upx',
					marginBottom: '20upx'
				},
				form: {
					bankCardPositiveUrl: '',
					bankCard1PositiveUrl: '',
					bankCardNo: '',
					bankCard1No: '',
					bills: [],
					contactNumber: '',
					nameOnCard: '',
					brankArea: '',
					bankEvidence: '',
					mailingAddress:''
				},
				rules: {
					mailingAddress: {
						type: 'string',
						required: true,
						message: '请填写邮寄地址',
						trigger: ['blur'],
					},
					bankCardPositiveUrl: {
						type: 'string',
						required: true,
						message: '请上传银行卡正面',
						trigger: ['blur'],
					},
					bankCard1PositiveUrl: {
						type: 'string',
						required: true,
						message: '请上传银行卡正面',
						trigger: ['blur'],
					},
					bankCardNo: {
						type: 'string',
						required: true,
						message: '请填写银行卡号',
						trigger: ['blur'],
					},
					bankCard1No: {
						type: 'string',
						required: true,
						message: '请填写银行卡号',
						trigger: ['blur'],
					},
					bills: {
						type: 'array',
						required: true,
						min: 1,
						message: '请上传票据',
						trigger: ['change'],
					},
					nameOnCard: {
						type: 'string',
						required: true,
						message: '请填写持卡人姓名',
						trigger: ['blur', 'change'],
					},
					contactNumber: [{
							type: 'string',
							required: true,
							message: '请填写手机号码',
							trigger: ['blur', 'change'],
						},
						{
							validator: checkPhone,
							trigger: ['blur', 'change']
						},
					],
				},
				bankCardPositiveUrl: [],
				bankCard1PositiveUrl: [],
				bills: [],
				isWhite: false,
				bankEvidence: [],
				pickerShow: false,
				columns: bankNameData
			};
		},
		onLoad(options) {
			this.checkMcPage(options);
			this.imageBackShow(['bankCardPositiveUrl', 'bankCard1PositiveUrl', 'bankCardNo', 'bankCard1No',
				'contactNumber'
			]);
			this.mutiImageBackShow(['bills']);
			let info = this.$getMcInfo(this.idCard);
			if (info.index.contactNumber) {
				this.form.contactNumber = info.index.contactNumber;
			}
			if (info.index.resultList && info.index.resultList[0].type == 1) {
				this.isWhite = true;
				this.rules.bills.required = false
			}
		},
		computed: {
			preStep() {
				return this.oneself ? mcStepKey.step1 : mcStepKey.step1_5;
			},
			currentStepIndex() {
				return this.oneself ? 1 : 2;
			}
		},
		methods: {
			addressChange(data) {
				this.form.brankArea = data.data.join('')
			},
			confirm() {
				if (this.oneself) {
					if (this.form.bankCardPositiveUrl == '') {
						uni.$u.toast('请上传银行卡正面照！');
						return;
					}
				} else {
					if (this.form.bankCard1PositiveUrl == '') {
						uni.$u.toast('请上传银行卡正面照！');
						return;
					}
				}
				this.$refs.form.validate().then(res => {
					this.toNextMcPage(this.idCard);
				});
			},
			async atterUploadCardPositive(fileList) {
			  this.form.bankCardPositiveUrl = fileList[0].url;
			  this.$refs.form.validateField('bankCardPositiveUrl');
			  const imageBase64 = await pathToBase64(fileList[0].thumb);
			  const accessToken = await getAccessToken();
			  const { data } = await bankCardOCR(imageBase64.replace(/^data:image\/\w+;base64,/, ''), accessToken);
			  if(!data.result) {
				  this.form.bankCardPositiveUrl = [];
				  this.bankCardPositiveUrl = [];
				  uni.$u.toast('请上传清晰的银行卡！');
				  uni.hideLoading();
				  return;
			  }
			  const bankCardNo = data.result.bank_card_number;
			  const bankName = data.result.bank_name;
			  if (bankName !== '') {
				  this.form.bankName = bankName;
			  }
			  // 识别出证件保存
			  if (bankCardNo !== '') {
			    this.form.bankCardNo = bankCardNo;
			    this.$refs.form.validateField('bankCardNo');
			  }
			  uni.hideLoading()
			},
			async atterUploadCard1Positive(fileList) {
				this.form.bankCard1PositiveUrl = fileList[0].url;
				this.$refs.form.validateField('bankCard1PositiveUrl');
				const imageBase64 = await pathToBase64(fileList[0].thumb);
				const accessToken = await getAccessToken();
				const {
					data
				} = await bankCardOCR(imageBase64.replace(/^data:image\/\w+;base64,/, ''), accessToken);
				const bankCard1No = data.result.bank_card_number;
				// 识别出证件保存
				if (bankCard1No !== '') {
					this.form.bankCard1No = bankCard1No;
					this.$refs.form.validateField('bankCard1No');
				}
				uni.hideLoading()
			},
			pickerConfirm(e){
				this.form.bankName = e.value[0]
				this.pickerShow = false;
			}
		},
	};
</script>

<style scoped lang="scss">
</style>
